<template>
  <div id="app">
    <div class="container">
      <p class="title">开通VIP会员</p>
      <div class="div-info">
        <div class="item-info" style="border:0">
          <p class="item-title">
            <Icon type="md-basket" />加入本站会员
          </p>
          <p class="item-title">开启尊贵特权之体验</p>
          <p class="normal">本站资源支持会员下载专享，普通注册会员只能原价购买资源或者限制免费下载次数，付费会员所有资源可无限下载。并可享受资源折扣或者免费下载。</p>
        </div>
        <div class="item-info">
          <p class="item-label">
            <Icon type="ios-trophy" />超值特惠
          </p>
          <p class="item-type">包月会员</p>
          <p class="money" style="color:#1e73be">U币29</p>
          <p class="item-content">
            免费素材下载<br>
            VIP用户专享资源<br>
            每天50个素材下载<br>
            享受素材包资源折扣优惠<br>
            享受月包素材折扣优惠<br>
            5X8小时在线客服服务<br>
            第一时间获取优质资源<br>
          </p>
          <Button icon="ios-ribbon" class="my-button">立即开通</Button>
        </div>
        <div class="item-info">
          <p class="item-label">
            <Icon type="ios-trophy" />超值特惠
          </p>
          <p class="item-type">包月会员</p>
          <p class="money" style="color:#e51468">U币149</p>
          <p class="item-content">
            免费素材下载<br>
            VIP用户专享资源<br>
            每天50个素材下载<br>
            享受素材包资源折扣优惠<br>
            享受月包素材折扣优惠<br>
            5X8小时在线客服服务<br>
            第一时间获取优质资源<br>
          </p>
          <Button icon="ios-ribbon" class="my-button" style="background-color:#e51468">立即开通</Button>
        </div>
        <div class="item-info">
          <p class="item-label">
            <Icon type="ios-trophy" />超值特惠
          </p>
          <p class="item-type">包月会员</p>
          <p class="money" style="color:#dd9933">U币29</p>
          <p class="item-content">
            免费素材下载<br>
            VIP用户专享资源<br>
            每天50个素材下载<br>
            享受素材包资源折扣优惠<br>
            享受月包素材折扣优惠<br>
            5X8小时在线客服服务<br>
            第一时间获取优质资源<br>
          </p>
          <Button icon="ios-ribbon" class="my-button" style="background-color:#dd9933">立即开通</Button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  components: {},
  data() {
    return {};
  },
};
</script>
<style scoped>
.my-button{
    margin-top: 20px;
    color: #fff;
    font-size: 14px;
    background-color: #1e73be;
    height: 40px;
    font-weight: bold;
}
.money {
  text-align: center;
  font-size: 45px;
  padding: 15px 0;
  font-weight: 700;
  line-height: 1em;
  color: #ff9800;
}
.item-type {
  clear: both;
}
.item-label {
  width: 100px;
  padding: 3px;
  font-size: 12px;
  font-weight: bold;
  color: #ff5722;
  margin-bottom: 10px;
  text-align: center;
  border: 1px solid #eee;
  border-radius: 20px;
  float: right;
}
.normal {
  margin-top: 30px;
  line-height: 28px;
}
.item-title {
  font-size: 22px;
  font-weight: bold;
  letter-spacing: 0.1em;
}
.item-info {
  width: 23%;
  padding: 10px;
  margin: 1%;
  background-color: #fff;
  border: 1px solid rgba(171, 171, 171, 0.23);
  text-align: center;
  border-radius: 8px;
  letter-spacing: .1em;
}
.div-info {
  display: flex;
  margin-top: 30px;
}
.container {
  width: 78%;
  margin: 60px auto;
  background-color: #ffffff;
  padding: 40px;
  padding-top: 20px;
}
.title {
  font-size: 22px;
  padding-bottom: 20px;
  border-bottom: 1px dotted #eee;
}
</style>
